<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title></title>
</head>
<body>
    <div class="col-md-12" th:fragment="search_form">
    <link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css"/>
	<link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal.css"/>
	<link th:href="@{/plugins/zTree/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet" href="plugins/zTree/css/zTreeStyle/zTreeStyle.css"/>
	<script th:src="@{/plugins/zTree/js/jquery.ztree.core-3.5.js}" src="plugins/zTree/js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
    
        <div class="form">
            <form onsubmit="goodsMatchSearchF();return false;" class="form-inline" method="post" th:object="${searchCondition}" name="form_goods_search" id="form_goods_search">

                <div class="form-group">
                    <select id="select_goods_CategoryId" th:field="*{categoryId}" style="display:none;" th:remove="none" class="form-control">
                        <option value="">所有分类</option>
                        <option th:each="eachValue : ${categorys}" th:value="${eachValue.id}" th:text="${eachValue.name}"></option>
                    </select>
                    <button id="treebutton" class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown">
							分类 <i class="fa fa-angle-down"></i>
					</button>
					<div class="dropdown-menu dropdown-content input-large">
						<div id="category_tree" role="menu"></div>
					</div>
                </div>

                <div class="form-group">
                    <select id="select_goods_BrandsId" th:field="*{brandId}" th:remove="none" class="form-control">
                        <option value="">所有品牌</option>
                        <option th:each="eachValue : ${brands}" th:value="${eachValue.id}" th:text="${eachValue.name}"></option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="sr-only" for="input_goodsName">goodsName</label>
                    <input type="text" th:field="*{goodsName}" placeholder="商品名称"  id="input_goodsName" class="form-control" />
                </div>
                <button type="button" id="bt_goods_search" name="bt_goods_search" class="btn green">
                    <i class="fa  fa-search"></i>
                </button>
                <input type="hidden" id="input_search_type" th:field="*{searchType}"/>
                <input type="hidden" th:field="*{searchId}"/>
            </form>
          
        </div>
    </div>
    <div th:fragment="search_list">
        <style>

            .hasCasCade{
                margin-top: 10px;
            }

            .notCasCade{
                margin-top: 30px;
            }

        </style>

            <div style="margin-top: 10px;" class="row text-center">
                <div class="col-md-5">
                    <div class="text-center">
                        <label class="btn btn-block green">可选商品</label>
                    </div>
                    <select class="form-control"  size="10"  id="select_matchable_goodsList">
                        <option th:each="eachValue : ${selectableGoods}" th:value="${eachValue.id}" th:text="${eachValue.name}"></option>
                    </select>
                </div>
                <div class="col-md-2">
                    <div class="text-center">
                        <label class="btn btn-block green">操作</label>
                    </div>
                    <label></label>
                    <div class="radio-list" th:if="${casCade}">
                        <label>
                            <div style="display: inline;">
                                <span>
                                   <input type="radio" checked="true" name="casCadeType" id="optionsRadios1" value="ONEWAY"/>
                                </span>
                            </div>
                          	  单向关联
                        </label>

                        <label>
                            <div style="display: inline;">
                                 <span>
                                   <input type="radio" name="casCadeType" id="optionsRadios2" value="TWOWAY"/>
                                 </span>
                            </div>
                         	   双向关联
                        </label>

                    </div>
                    <div class="btn-group-vertical">
                        <button type="button" class="btn btn-sm purple " onclick="allToRight()" id="btn_allToRight" name="btn_allToRight" th:classappend="${(casCade != null &amp;&amp; casCade)?'hasCasCade':'notCasCade'}">&nbsp;&nbsp;<i class="fa fa-angle-double-right"></i>&nbsp;&nbsp;</button>
                        <button type="button" class="btn btn-sm purple " onclick="moveToRight()" id="btn_moveToRight" name="btn_moveToRight" style="margin-top: 10px;"><i class="fa fa-angle-right"></i></button>
                        <button type="button" class="btn btn-sm purple " onclick="moveToLeft()" id="btn_moveToLeft" name="btn_moveToLeft"  style="margin-top: 10px;"><i class="fa fa-angle-left"></i></button>
                        <button type="button" class="btn btn-sm purple " onclick="allToLeft()"  id="btn_allToLeft" name="btn_allToLeft"  style="margin-top: 10px;"><i class="fa fa-angle-double-left"></i></button>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="text-center">
                        <label class="btn btn-block green">该套餐内的商品</label>
                    </div>
                    <select  class="form-control" size="10" id="select_goods_matchedList">
                        <option th:each="eachValue : ${selectedGoods}" th:value="${eachValue.id}" th:text="${eachValue.name}"></option>
                    </select>
                </div>
            </div>
    <script th:inline="javascript">
        /*<![CDATA[*/
        /*返回已选择的商品的ID字符串，已逗号进行分割*/
        function getSelectedGoodsIds(){
            var selectedGoodsId = '';
            $('#select_goods_matchedList').children().each(function(){
                selectedGoodsId += this.value;
                selectedGoodsId += ',';
            });
            if(selectedGoodsId.length > 0){
                selectedGoodsId = selectedGoodsId.slice(0,-1);
            }
            return selectedGoodsId;
        }
        function moveToLeft(){
            var selectedGoods = $('#select_goods_matchedList option:selected');
            if(selectedGoods.length){
                $(selectedGoods[0]).remove();
                selectedGoods[0].selected = false ;
                $('#select_matchable_goodsList').append(selectedGoods[0]);
            }else{
                alert('未选择商品');
            }
        }

        function allToLeft(){
            $('#select_goods_matchedList').children().each(function(){
                this.selected = false;
                $('#select_matchable_goodsList').append(this);
            });
            $('#select_goods_matchedList').empty();
        }

        function moveToRight(){
            var selectedGoods = $('#select_matchable_goodsList option:selected');
            if(selectedGoods.length){
                if($('#input_search_type').val() == 'MATCH'){
                    if(checkMatched()){
                        return false;
                    }
                }
                $(selectedGoods[0]).remove();
                selectedGoods[0].selected = false ;
                $('#select_goods_matchedList').append(selectedGoods[0]);
            }else{
                alert('未选择商品');
            }
        }

        function allToRight(){
            if($('#input_search_type').val() == 'MATCH'){
                if(($('#select_goods_matchedList').children().length + $('#select_matchable_goodsList').children().length) > 10){
                    alert('最多关联十个商品');
                    return false;
                }
            }

            $('#select_matchable_goodsList').children().each(function(){
                this.selected = false;
                $('#select_goods_matchedList').append(this);
            });
            $('#select_matchable_goodsList').empty();
        }

        function checkMatched(){
            if($('#select_goods_matchedList').children().length == 10){
                alert('最多关联十个商品');
                return true;
            }else{
                return false;
            }
        }
        $(document).ready(function(){
            $("#select_matchable_goodsList option").live("dblclick",function(){
            	if($('#input_search_type').val() == 'MATCH'){
                    if(checkMatched()){
                        return false;
                    }
                }
                this.selected = false;
                $('#select_goods_matchedList').append(this);
            });
            $('#select_goods_matchedList option').live('dblclick',function(){
                this.selected = false;
                $('#select_matchable_goodsList').append(this);
            });
            $('#bt_goods_search').bind('click',goodsMatchSearchF);
            
            $('#category_tree').jstree({
                "core" : {
                    'data' : {'url' : function (node) {return '/tree/category';}}
                }
            });
            $('#treebutton').html($("#select_goods_CategoryId").find("option:selected").text() + '<i class="fa fa-angle-down"></i>');
        	$("#select_goods_CategoryId").change(function(){$('#treebutton').html($("#select_goods_CategoryId").find("option:selected").text() + '<i class="fa fa-angle-down"></i>'); });
            $('#category_tree').on('select_node.jstree', function(e,data) { 
            	$("#select_goods_CategoryId option").each(function() { this.selected = (this.value == data.node.id); });
            	$("#select_goods_CategoryId").change();
            	$("#tree_modal").modal('hide');       
    	    });
        });

        var goodsMatchSearchF=function goodsMatchSearch(){
            $.ajax({
                url:'/goods/goods/selectableGoods',
                data:$('#form_goods_search').serialize()+'&excludGoodsIds='+getSelectedGoodsIds(),
                type:'post',
                async:false,
                dataType:'json',
                success:function(data){
                    $('#select_matchable_goodsList').empty();
                    if(data.length){
                        for(var i =0 ;i<data.length;i++){
                            $('#select_matchable_goodsList').append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
                        }
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){

                }
            });
        }
        /*]]>*/
    </script>
    </div>
</body>
</html>